<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        概览
        <small>用户概览</small>
      </h1>
    </section>
  
    <!-- Main content -->
    <section class="content container-fluid">
  
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>{{apps}}</h3>
              <p>应用总数</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <router-link to="/apps" class="small-box-footer">查看详细
              <i class="fa fa-arrow-circle-right"></i>
            </router-link>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
              <h3>{{devices}}</h3>
              <p>设备总数</p>
            </div>
            <div class="icon">
              <i class="fa fa-fw fa-print"></i>
            </div>
            <router-link to="/devices" class="small-box-footer">查看详细
              <i class="fa fa-arrow-circle-right"></i>
            </router-link>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>{{totalup}}</h3>
              <p>上报数据</p>
            </div>
            <div class="icon">
              <i class="fa fa-fw fa-cloud-upload"></i>
            </div>
            <router-link to="/sessions" class="small-box-footer">查看详细
              <i class="fa fa-arrow-circle-right"></i>
            </router-link>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3>{{totaldown}}</h3>
              <p>下发指令</p>
            </div>
            <div class="icon">
              <i class="fa fa-fw fa-cloud-download"></i>
            </div>
            <router-link to="/sessions" class="small-box-footer">查看详细
              <i class="fa fa-arrow-circle-right"></i>
            </router-link>
          </div>
        </div>
        <!-- ./col -->
      </div>
      <!-- /.row -->
  
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'General',
  computed: mapState({
    apps: state => state.general.apps,
    devices: state => state.general.devices,
    totalup: state => state.general.totalup,
    totaldown: state => state.general.totaldown,
  }),
  created() {
    document.title = "概览";
    this.$store.dispatch('get_general');
  }
}
</script>
